<mat-card>
  <div fxLayout="row" fxLayoutAlign="space-evenly center">
    <mat-form-field fxFlex="80">
      <input matInput #newEntityName placeholder="Entity name">
    </mat-form-field>
    <button mat-raised-button color="primary" (click)="newEntity(newEntityName.value)">Add</button>
  </div>

  <div class="entities">
    <div *ngFor="let entity of entities;let i=index" fxLayout="row" fxLayoutAlign=" center" class="entity-container">
      <div fxFlex="60">
        {{entity.name}}
      </div>
      <div fxFlex="40">
        <button mat-icon-button (click)="edit(entity)" color="accent">
          <mat-icon aria-label="Edit this entity">edit</mat-icon>
        </button>
        <button mat-icon-button (click)="deleteEntity(entity._id.$oid,i)" color="warn">
            <mat-icon aria-label="Delete this entity">delete</mat-icon>
          </button>
      </div>
    </div>
  </div>
</mat-card>
